<template>
    <view class="boxs">
        <svg @click="goback" t="1755998824764" class="icon fanhuiicon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="9162" width="200" height="200">
            <path
                d="M514.009 7.787c-278.47 0-504.213 225.743-504.213 504.213s225.743 504.213 504.213 504.213 504.213-225.743 504.213-504.213-225.746-504.213-504.213-504.213zM514.009 975.875c-256.212 0-463.877-207.663-463.877-463.877s207.663-463.875 463.877-463.875 463.877 207.663 463.877 463.875-207.664 463.877-463.877 463.877z"
                p-id="9163" fill="#ffffff"></path>
            <path
                d="M776.198 481.746h-403.371l131.094-141.18-40.336-40.336-211.77 211.77 211.77 211.77 40.336-40.339-131.094-141.178h403.371z"
                p-id="9164" fill="#ffffff"></path>
        </svg>
        <div class="titles">
            第{{ currentQuestion + 1 }}题/{{ questions.length }}题
        </div>
        <div class="timu" v-if="questions[currentQuestion]">{{ questions[currentQuestion].text }}</div>
        <div class="shuben">
            <image class="shu" mode="widthFix" src="/static/shu.webp" />
            <div class="tiku" v-if="questions[currentQuestion]">
                <div v-for="(option, index) in questions[currentQuestion].options" :key="index" class="lines"
                    @click="selectOption(index)">
                    <div class="question" :class="{
                        'selected': selectedOption === index && !showResult,
                        'lvseword': showResult && index === questions[currentQuestion].correctAnswer,
                        'errorsword': showResult && selectedOption === index && selectedOption !== questions[currentQuestion].correctAnswer
                    }">
                        {{ String.fromCharCode(65 + index) }}
                    </div>
                    <div class="answer">{{ option }}</div>
                </div>

                <div v-if="showResult" class="result">
                    我的答案:<text :class="selectedOption === questions[currentQuestion].correctAnswer ? 'lvse' : 'errors'">{{
                        String.fromCharCode(65 + selectedOption) }}</text>
                    正确答案: <text class="lvse">{{ String.fromCharCode(65 + questions[currentQuestion].correctAnswer) }}</text>
                </div>

                <div v-if="showResult" class="jiexi">
                    <text style="color: red"> 解析：</text>
                    {{ questions[currentQuestion].explanation }}
                </div>
            </div>

            <div v-if="!showResult && selectedOption !== null" class="btns" @click="submitAnswer">确定</div>
            <div v-if="showResult && currentQuestion < questions.length - 1" class="btns" @click="nextQuestion">下一题</div>
            <div v-if="showResult && currentQuestion === questions.length - 1" class="btns" @click="getresult">完成</div>
        </div>
        <!-- 成绩展示弹窗 -->
        <tanchaung ref="scorePopup" :score="calculateScore()" :correctCount="correctCount" :totalCount="questions.length"
            :showPopup="showScore" @close="showScore = false">
        </tanchaung>
    </view>
</template>
<script>
import request from '@/utils/request.js';
import tanchaung from "@/components/tanchaung.vue"
export default {
    components: { tanchaung },
    data() {
        return {
            currentQuestion: 0,
            selectedOption: null,
            showResult: false,
            showScore: false,
            correctCount: 0,
            questions: [
            ],


        }
    },
    created() {
        this.getlist()
    },
    methods: {
        goback() {
            const pages = getCurrentPages();
            // 判断页面栈中是否有上一页
            if (pages.length > 1) {
                uni.navigateBack({
                    delta: 1
                });
            } else {
                // 如果没有上一页，可以关闭当前页面或跳转到首页
                uni.reLaunch({
                    url: '/pages/index/index'
                });
            }
        },
        getlist() {


            request({
                url: "/api/question/random",
                method: 'GET',
            }).then(res => {
                this.questions = res.data
            });
        },
        getresult() {
            request({
                url: "/api/question/random",
                method: 'GET',
            }).then(res => {
                this.questions = res.data
            });


            this.$refs.scorePopup.open()
            // this.currentQuestion = 0;
            // this.selectedOption = null;
            // this.showResult = false;
            // this.showScore = false;
            // this.correctCount = 0;
        },

        calculateScore() {
            return Math.round((this.correctCount / this.questions.length) * 100);
        },
        selectOption(index) {
            if (!this.showResult) {
                this.selectedOption = index;
            }
        },
        submitAnswer() {
            if (this.selectedOption === null) return;

            this.showResult = true;

            if (this.selectedOption === this.questions[this.currentQuestion].correctAnswer) {
                this.correctCount++;
            }
        },
        nextQuestion() {
            if (this.currentQuestion < this.questions.length - 1) {
                this.currentQuestion++;
                this.selectedOption = null;
                this.showResult = false;
            } else {
                this.showScore = true;
            }
        },
    }

}
</script>
<style>
.titles {
    text-align: right;
    padding-right: 60rpx;
    margin-bottom: 30rpx;
    font-weight: bold;
}

.selected {
    background: #ffcc00 !important;
    /* 黄色背景 */
}

.errorsword {
    background: red !important;
}

.lvseword {
    background: rgb(0, 216, 0) !important;
}

.btns {
    width: 70%;
    height: 90rpx;
    line-height: 90rpx;
    background: linear-gradient(to top, rgb(24, 116, 255), rgb(88, 155, 255));
    border-radius: 20rpx;
    color: white;
    text-align: center;
    margin: 0 auto;
    z-index: 99;
}

.jiexi {
    margin-top: 15px;
    font-size: 26rpx;
    color: rgb(102, 102, 102);
}

.lvse {
    color: rgb(0, 216, 0);
}

.result text {
    margin-right: 30rpx;
    margin-left: 10rpx;
}

.errors {
    color: red;
}

.question {
    width: 40rpx;
    height: 40rpx;
    text-align: center;
    line-height: 40rpx;
    float: left;
    font-size: 25upx;
    font-weight: bold;
    color: white;
    border-radius: 50%;
    background: linear-gradient(to left, rgb(24, 116, 255), rgb(88, 155, 255));
}

.answer {
    width: 350rpx;
    margin-left: 20rpx;
    font-size: 30rpx;
    line-height: 45rpx;
    float: left;
}

.tiku {
    position: absolute;
    width: 100%;
    padding: 100rpx 150rpx;
    padding-top: 150rpx;
    padding-left: 170rpx;
    padding-bottom: 0px;
    box-sizing: border-box;
    top: 0;
    z-index: 9;
}

.lines {
    overflow: hidden;
    margin-bottom: 30rpx;
}

.shu {
    width: 100%;
}

.shuben {
    width: 100%;
    display: block;
    position: relative;
    z-index: 9;
}

.timu {
    background: rgba(255, 255, 255, 0.6);
    width: 80%;
    padding: 20rpx;
    border-radius: 10rpx;
    margin: 0 auto;
    font-size: 30rpx;
    font-weight: bold;
    color: #0080cf;
}

.boxs {
    padding-top: 100rpx;
    background: url("/static/bg2.webp");
    background-size: cover;
    background-position: center;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 50rpx;
    box-sizing: border-box;
}
</style>